<template>
  <div class="carousel">
    <div class="carousel-container" :style="carouselStyle">
      <div class="carousel-item" v-for="(image, index) in images" :key="index">
        <img :src="image" alt="carousel image" />
      </div>
    </div>
    <!-- 提示文字 -->
    <div class="carousel-caption">
      <dv-decoration-7> 物候相机 </dv-decoration-7>
    </div>
    <button class="carousel-control prev" @click="goToPrevSlide">&#10094;</button>
    <button class="carousel-control next" @click="goToNextSlide">&#10095;</button>
  </div>
</template>

<script setup>
import {ref, computed, onMounted, onUnmounted} from 'vue';
import CQ_guihuaRGB_2024_07_20_11_00 from '@/assets/phenology_image/CQ_guihuaRGB_2024_07_20_11_00.jpg';
import CQ_guihuaRGB_2024_07_23_11_00 from '@/assets/phenology_image/CQ_guihuaRGB_2024_07_23_11_00.jpg';
import CQ_guihuaRGB_2024_07_25_11_00 from '@/assets/phenology_image/CQ_guihuaRGB_2024_07_25_11_00.jpg';
import CQ_guihuaRGB_2024_07_31_11_00 from '@/assets/phenology_image/CQ_guihuaRGB_2024_07_31_11_00.jpg';
import CQ_guihuaRGB_2024_08_01_11_00 from '@/assets/phenology_image/CQ_guihuaRGB_2024_08_01_11_00.jpg';
import CQ_guihuaRGB_2024_08_04_11_00 from '@/assets/phenology_image/CQ_guihuaRGB_2024_08_04_11_00.jpg';
import CQ_guihuaRGB_2024_08_05_11_00 from '@/assets/phenology_image/CQ_guihuaRGB_2024_08_05_11_00.jpg';
import CQ_guihuaRGB_2024_08_08_11_00 from '@/assets/phenology_image/CQ_guihuaRGB_2024_08_08_11_00.jpg';
import CQ_guihuaRGB_2024_08_11_11_00 from '@/assets/phenology_image/CQ_guihuaRGB_2024_08_11_11_00.jpg';
import CQ_guihuaRGB_2024_08_13_11_00 from '@/assets/phenology_image/CQ_guihuaRGB_2024_08_13_11_00.jpg';
import CQ_guihuaRGB_2024_08_16_11_00 from '@/assets/phenology_image/CQ_guihuaRGB_2024_08_16_11_00.jpg';
import CQ_guihuaRGB_2024_08_19_11_00 from '@/assets/phenology_image/CQ_guihuaRGB_2024_08_19_11_00.jpg';
import CQ_guihuaRGB_2024_08_21_11_00 from '@/assets/phenology_image/CQ_guihuaRGB_2024_08_21_11_00.jpg';
import CQ_guihuaRGB_2024_08_24_11_00 from '@/assets/phenology_image/CQ_guihuaRGB_2024_08_24_11_00.jpg';
import CQ_guihuaRGB_2024_08_26_11_00 from '@/assets/phenology_image/CQ_guihuaRGB_2024_08_26_11_00.jpg';
import CQ_guihuaRGB_2024_09_01_11_00 from '@/assets/phenology_image/CQ_guihuaRGB_2024_09_01_11_00.jpg';
import CQ_guihuaRGB_2024_09_02_11_00 from '@/assets/phenology_image/CQ_guihuaRGB_2024_09_02_11_00.jpg';
import CQ_guihuaRGB_2024_09_05_11_00 from '@/assets/phenology_image/CQ_guihuaRGB_2024_09_05_11_00.jpg';
import CQ_guihuaRGB_2024_09_08_11_00 from '@/assets/phenology_image/CQ_guihuaRGB_2024_09_08_11_00.jpg';
import CQ_guihuaRGB_2024_09_11_11_00 from '@/assets/phenology_image/CQ_guihuaRGB_2024_09_11_11_00.jpg';
import CQ_guihuaRGB_2024_09_14_11_00 from '@/assets/phenology_image/CQ_guihuaRGB_2024_09_14_11_00.jpg';
import CQ_guihuaRGB_2024_09_17_11_00 from '@/assets/phenology_image/CQ_guihuaRGB_2024_09_17_11_00.jpg';
import CQ_guihuaRGB_2024_09_25_11_00 from '@/assets/phenology_image/CQ_guihuaRGB_2024_09_25_11_00.jpg';
import CQ_guihuaRGB_2024_09_26_11_00 from '@/assets/phenology_image/CQ_guihuaRGB_2024_09_26_11_00.jpg';
import CQ_guihuaRGB_2024_10_04_14_00 from '@/assets/phenology_image/CQ_guihuaRGB_2024_10_04_14_00.jpg';
import CQ_guihuaRGB_2024_10_20_11_00 from '@/assets/phenology_image/CQ_guihuaRGB_2024_10_20_11_00.jpg';
import CQ_guihuaRGB_2024_10_24_11_00 from '@/assets/phenology_image/CQ_guihuaRGB_2024_10_24_11_00.jpg';
import CQ_guihuaRGB_2024_11_03_11_00 from '@/assets/phenology_image/CQ_guihuaRGB_2024_11_03_11_00.jpg';
import CQ_guihuaRGB_2024_11_05_11_00 from '@/assets/phenology_image/CQ_guihuaRGB_2024_11_05_08_00.jpg';
import CQ_guihuaRGB_2024_11_06_11_00 from '@/assets/phenology_image/CQ_guihuaRGB_2024_11_06_16_00.jpg';
import CQ_guihuaRGB_2024_11_09_11_00 from '@/assets/phenology_image/CQ_guihuaRGB_2024_11_09_08_00.jpg';
import fengyunS9_9_2025_09_11_111552 from '@/assets/phenology_image/fengyunS9_9_2025_09_11_111552.jpg';
import fengyunS9_9_IR_2025_09_11_111552 from '@/assets/phenology_image/fengyunS9_9_IR_2025_09_11_111552.jpg'


// 引入导入的所有图片
const images = ref([
  // CQ_guihuaRGB_2024_07_20_11_00,
  // CQ_guihuaRGB_2024_07_23_11_00,
  // CQ_guihuaRGB_2024_07_25_11_00,
  // CQ_guihuaRGB_2024_07_31_11_00,
  // CQ_guihuaRGB_2024_08_01_11_00,
  // CQ_guihuaRGB_2024_08_04_11_00,
  // CQ_guihuaRGB_2024_08_05_11_00,
  // CQ_guihuaRGB_2024_08_08_11_00,
  // CQ_guihuaRGB_2024_08_11_11_00,
  // CQ_guihuaRGB_2024_08_13_11_00,
  // CQ_guihuaRGB_2024_08_16_11_00,
  // CQ_guihuaRGB_2024_08_19_11_00,
  // CQ_guihuaRGB_2024_08_21_11_00,
  // CQ_guihuaRGB_2024_08_24_11_00,
  // CQ_guihuaRGB_2024_08_26_11_00,
  // CQ_guihuaRGB_2024_09_01_11_00,
  // CQ_guihuaRGB_2024_09_02_11_00,
  // CQ_guihuaRGB_2024_09_05_11_00,
  // CQ_guihuaRGB_2024_09_08_11_00,
  // CQ_guihuaRGB_2024_09_11_11_00,
  // CQ_guihuaRGB_2024_09_14_11_00,
  // CQ_guihuaRGB_2024_09_17_11_00,
  // CQ_guihuaRGB_2024_09_25_11_00,
  // CQ_guihuaRGB_2024_09_26_11_00,
  // CQ_guihuaRGB_2024_10_04_14_00,
  // CQ_guihuaRGB_2024_10_20_11_00,
  // CQ_guihuaRGB_2024_10_24_11_00,
  // CQ_guihuaRGB_2024_11_03_11_00,
  // CQ_guihuaRGB_2024_11_05_11_00,
  // CQ_guihuaRGB_2024_11_06_11_00,
  // CQ_guihuaRGB_2024_11_09_11_00,
  fengyunS9_9_2025_09_11_111552,
  fengyunS9_9_IR_2025_09_11_111552

]);

// // 动态加载本地图片路径
// const images = ref([]);

// const loadLocalImages = async () => {
//   // 导入所有图片文件
//   const imageFiles = import.meta.glob('@/assets/phenology_image/*.jpg');
//   // 获取所有图片路径
//   const imagePaths = Object.keys(imageFiles);
//   // 转换为可访问的 URL
//   images.value = imagePaths.map((path) => {
//     return new URL(path, import.meta.url).href; // 转换为可访问的 URL
//   });
// };

const currentIndex = ref(0);

const carouselStyle = computed(() => {
  return {
    transform: `translateX(${-currentIndex.value * 100}%)`,
  };
});

function goToPrevSlide() {
  currentIndex.value = (currentIndex.value - 1 + images.value.length) % images.value.length;
}

function goToNextSlide() {
  currentIndex.value = (currentIndex.value + 1) % images.value.length;
}

let intervalId;

function startSlideshow() {
  intervalId = setInterval(() => {
    currentIndex.value = (currentIndex.value + 1) % images.value.length;
  }, 3000); // 每3秒切换到下一张图片
}

function stopSlideshow() {
  clearInterval(intervalId);
}

onMounted(
  () => {
    startSlideshow();
  }
);
onUnmounted(stopSlideshow);

</script>

<style scoped lang="scss">
.carousel {
  position: relative;
  height: 96%;
  width: 80%;
  margin: 0 auto;
  overflow: hidden; /* 防止图片超出容器 */
  .carousel-container {
    display: flex;
    transition: transform 0.5s ease;
    .carousel-item {
      min-width: 100%;
      img {
        width: 110%; /* 原先100 */
        object-position: center; /* 水平和垂直居中 */
        object-fit: contain; /* 保持图片比例，自动调整大小 */
        display: block;
        margin-top: 2%; /* 增加顶部间距,原先不加顶部间距 */
      }
    }
  }
  .carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(6, 82, 221, 0.3);
    color: white;
    border: none;
    cursor: pointer;
    padding: 2%;
    &.prev {
      left: 2%;
    }
    &.next {
      right: 2%;
    }
  }
  .carousel-caption {
    position: absolute;
    bottom: 10%;
    right: -5%;
    // 
    transform: translateX(-50%);
    color: #1e3799;
    font-size: 2vh;
    font-weight: bold;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.5);
  }
}
</style>